<template>
  <div>
    <p>pausableWatch：测试vueuse中的pausableWatch</p>
    <p ref="textRef">输出值：{{ count }}</p>
    <p>
      <button @click="onClickStep1">1 > 点击自增1</button>
    </p>
    <p>
      <button @click="pause">暂停对count值的监听</button>
    </p>
    <p>
      <button @click="resume">恢复对count值的监听</button>
    </p>

    <p>
      <!-- stop的行为与默认的watch stop行为一致 一旦停止不会再重启 -->
      <button @click="stop">停止对count值的监听</button>
    </p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
// https://vueuse.org/shared/pausableWatch/
import { pausableWatch } from '@vueuse/core';

const count = ref(0);
const textRef = ref();

// 此方法与vue的watch功能基本一直 它提供了更为方便控制监听时机的一些方法
const { stop, pause, resume } = pausableWatch(count, v => {
  console.log(`count 的数据改变了：${v}，内容是：${textRef.value.innerHTML}`);
});

pausableWatch(
  count,
  v => {
    console.log(`222 count 的数据改变了：${v}，内容是：${textRef.value.innerHTML}`);
  },
  {
    flush: 'post', // 触发时机为 dom更新后
  },
);

/*
  https://vueuse.org/guide/config.html
  Reactive Timing

  flush配置 更新时机
  flush: {
    pre 默认
    post 组件更新后触发 这样就可以访问更新后的dom
    sync 强制总是同步触发效果
  }
 */

function onClickStep1() {
  count.value++;
  console.log(count.value);
}
</script>

<style></style>
